<template>
  <!-- 水波图 -->
  <div
    ref="chartEl"
    :style="stylesConfig"
    v-resize="resizeHandler"
    class="compo-public-style"
  ></div>
</template>

<script setup>
import { computed } from 'vue';

import { useChartComponentData } from '@/hooks/use-chart-component-data';

const props = defineProps({
  value: {
    type: Object,
    default: () => {}
  },
  preview: {
    type: Boolean,
    default: () => false
  }
});

// 样式配置
const stylesConfig = computed(() => {
  return {
    width: `${styles.value?.w / 100}rem`,
    height: `${styles.value?.h / 100}rem`,
    position: preview.value ? 'absolute' : 'static',
    left: `${styles.value?.x}px`,
    top: `${styles.value?.y}px`,
    borderRadius: `${styles.value.leftTop / 100}rem ${
      styles.value.rightTop / 100
    }rem ${styles.value.rightBottom / 100}rem ${
      styles.value.leftBottom / 100
    }rem`
  };
});

const mockData = {
  legend: {
    show: true //是否展示图例
  },
  series: [
    {
      type: 'liquidFill',
      data: [
        0.5
        // 0.4, 0.3
        // {
        //   value: 0.3,
        //   itemStyle: {
        //     color: 'red',
        //     opacity: 0.6
        //   },
        //   emphasis: {
        //     itemStyle: {
        //       opacity: 0.9
        //     }
        //   }
        // }
      ],
      color: ['#4366f3'], //设置颜色系列
      label: {
        fontSize: 18,
        fontWeight: 600,
        position: ['50%', '65%'] //文字所在位置
      },
      // backgroundStyle: {
      //   borderWidth: 1, //内边框宽度
      //   borderColor: 'yellow', //背景内边框
      //   color: 'white', //背景颜色
      //   shadowColor: 'red', //阴影
      //   shadowBlur: 10 //阴影模糊
      // }
      outline: {
        borderDistance: 0, //边框距离
        itemStyle: {
          borderWidth: 1,
          borderColor: 'blue',
          shadowBlur: 10
          // shadowColor: 'red'
        }
      }

      // temStyle: {
      //   opacity: 0.6 //正常样式
      // },
      // emphasis: {
      //   itemStyle: {
      //     opacity: 0.9 //悬浮样式
      //   }
      // }
    }
  ]
};

//图形类型配置
const chartTypeConfig = {
  type: 'wave'
};
const { styles, preview, chartEl, resizeHandler } = useChartComponentData(
  props,
  mockData,
  chartTypeConfig
);
</script>
<style scoped lang="scss"></style>
